<template>
  <div class="layout-container">
    <Split
      v-if="config.type == 'layout'"
      v-model="config.config.value"
      :mode="config.config.mode == 'h' ? 'horizontal' : 'vertical'"
      min="17px"
      max="17px"
    >
      <div
        :slot="config.config.mode == 'h' ? 'left' : 'top'"
        class="no-padding"
      >
        <layoutSetter
          :config="config.config.first"
          :busEvent="busEvent"
          :compBoxInfo="GT_compBoxInfo"
        ></layoutSetter>
      </div>
      <div
        :slot="config.config.mode == 'h' ? 'right' : 'bottom'"
        class="no-padding"
      >
        <layoutSetter
          :config="config.config.second"
          :busEvent="busEvent"
          :compBoxInfo="GT_compBoxInfo"
        ></layoutSetter>
      </div>
    </Split>
    <div v-else-if="config.type == 'comp'" class="comp">
      <o-base-form
        v-if="config.name === 'form'"
        :ref="config.config.config.uiID"
        :mode="1"
        @on-change="onAttrChange(config.config.config.uiID, $event)"
      />
      <o-simple-table
        v-if="config.name === 'table'"
        :ref="config.config.config.uiID"
        :columns="config.config.config.columns"
        :allowEdit="true"
        :disabled="false"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { Tsrv, T_srv, ifs, ts, vue, I_cmd, T_cmd } from './config';

@T_srv.comp({ name: 'layoutSetter' })
export default class layoutSetter extends vue {
  /* 父组件compBoxInfo */
  @T_srv.prop({
    required: false,
    type: Object,
    default: null
  })
  compBoxInfo: ifs.I_compBoxInfo;

  @T_srv.prop({
    required: false,
    type: Object,
    default: null
  })
  config: any;

  @T_srv.prop({
    required: false,
    type: Object,
    default: null
  })
  busEvent: any;

  /* 组件名 */
  private name: string = 'layoutSetter';

  private G_compName: string = this.name;

  /* 组件箱信息对象 */
  private GT_compBoxInfo: ifs.I_compBoxInfo;

  /* 组件箱对象 */
  private GT_compBox: ifs.I_compBox;

  /* 组件箱识别ID */
  private G_compID: string;

  /* 指挥部 */
  private GT_command: I_cmd = new T_cmd();

  /* 一个组件要调用多个相同组件时,组件箱内引用实例冲突,在此要定义实例变量接收,并在方法里加get 和 set  */
  // private GT_???CompBoxInfo : ifs.I_compBoxInfo;
  // private GT_???CompBoxInfo : ifs.I_compBoxInfo;
  // public get???CompBoxInfo(): ifs.I_compBoxInfo{
  //   return this.GT_compBoxInfo
  // }

  // public set???CompBoxInfo(e :ifs.I_compBoxInfo):void{
  //   this.GT_compBoxInfo = e
  // }

  created() {
    // 如果父组件没有传参，那就产生一个
    this.GT_compBoxInfo = Tsrv.getCompInfo(this.compBoxInfo);
    this.G_compID = this.GT_compBoxInfo.compID;
    this.GT_compBox = this.GT_compBoxInfo.TcompBox;
    this.GT_command.init(this, this.GT_compBoxInfo);
    this.init();
  }

  mounted() {
    /* 向父组件发送实例 */
    this.GT_compBox.addCompMergeName(this.G_compID, this.G_compName, this);
    this.$emit('compBoxInfo', this.GT_compBoxInfo);

    this.$nextTick(() => {
      setTimeout(() => {
        this.initCompCfg();
      }, 0);
      // this.initCompCfg();
    });

    /* 最终应用组件向外抛出引用实例,以供应用间调用 */
    // Tsrv.compBox.addCompMergeName(
    //   Tsrv.compBox.getDefGUID(), // 全局compBox
    //   '????',
    //   this,
    //   '???'
    // );
    if (this.config.type === 'comp') {
      this.$bus.$on(this.busEvent.main, (e: any) => {
        this.getData();
      });
    }
  }

  private init() {}

  private initCompCfg() {
    if (this.config.type === 'layout') {
      return;
    }
    const config = this.config.config.config;
    const initValue = this.config.config.initValue;
    const ref: any = this.$refs[config.uiID];
    if (this.config.name === 'form') {
      const columns: Array<any> = ref.transformColumns(config.fields);
      // const columns: Array<any> = ref.transformColumns(this.handleM2oFieldI18n(o.form.fields));
      // 初始化栏位
      ref.setColumns(columns);
      // 初始化值
      if (!Tsrv.noValue(initValue)) {
        ref.setFormData(this.fvArrToObj(initValue));
      }
      if (config.formColumnNum) {
        ref.setColumnNumber(config.formColumnNum, true);
      }
    }
    if (this.config.name === 'table') {
      if (!Tsrv.noValue(initValue)) {
        ref.setData(this.fvArrToRows(initValue));
      }
    }
  }

  private fvArrToObj(arr: Array<ifs.I_fv>): any {
    const obj: any = {};
    arr.forEach((o: any) => {
      obj[o.field] = o.value;
    });
    return obj;
  }

  private fvArrToRows(arr: Array<Array<ifs.I_fv>>): any {
    const rows: Array<any> = [];
    arr.forEach((o: Array<ifs.I_fv>, i: number) => {
      const rObj: any = {};
      o.forEach((r: ifs.I_fv) => {
        rObj[r.field] = r.value;
      });
      rows.push(rObj);
    });
    return rows;
  }

  private getData() {
    const config = this.config.config.config;
    if (Tsrv.noValue(config.uiID)) {
      return;
    }
    const ref: any = this.$refs[config.uiID];
    let data: any;
    if (this.config.name === 'form') {
      data = { [config.uiID]: ref.getData() ?? {} };
    }
    if (this.config.name === 'table') {
      const _tD = ref.getData();
      const tD: Array<ifs.I_fv> = [];
      _tD.forEach(ele => {
        Object.keys(ele).forEach(key => {
          if (key !== '_index' && key !== '_rowKey') {
            tD.push({ field: key, value: ele[key] } as ifs.I_fv);
          }
        });
      });
      data = { [config.uiID]: tD ?? {} };
    }
    this.$bus.$emit(this.busEvent.deputy, data);
  }

  onAttrChange(uiID: string, e: any) {
    // this.$emit('on-event', { name: 'on-attr-change', uiID, e });
  }

  destroyed() {
    this.GT_compBox.removeCompMergeName(this.G_compID, this.G_compName);
    /* 最终应用组件销毁 */
    /* this.GT_compBox.removeCompMergeName(this.G_compID, this.G_compName,'funName'); */

    /* 如果父组件传入的compBoxInfo则删除本文件产生的引用,反之是本组件产生的ID统一删除 */
    if (Tsrv.utils.isEmpty(this.compBoxInfo)) {
      this.GT_compBox.removeCompsWithCompID(this.G_compID);
    } else {
      this.GT_compBox.removeCompsMergeName(this.G_compID, [
        `${this.G_compName}`
      ]);
    }
    /* 如果是动态组件可能会关闭全局compBox */
    // this.GT_compBox = null
    this.$bus.$off(this.busEvent.main);
  }
}
</script>
<style lang="scss" scoped>
.layout-container {
  width: 100%;
  height: 100%;
  padding: 5px;
}
.no-padding {
  height: 100%;
  width: 100%;
  padding: 0;
  background-color: #fff;
  transform: translate3d(0, 0, 0);
  overflow: hidden;
}
</style>
